<template>
	<div class="home-container layout-pd">
		<div>
			<el-row>
				<el-col :span="24"  style="height: 50px;">{{ systemWellcomeRef }}</el-col>
				<el-col :span="24"  style="height: 50px;">手机访问，点击左上角可以打开菜单。</el-col>
			</el-row>
			<el-row>
				<el-col :span="24" style="height: 50px;">
					<router-link :to="{ path: '/iamstudent/myxuanke'! }">
						<SvgIcon :name="ele-Apple" style="font-size: 18px" />
						<p>我的选课（我是学生）</p>
					</router-link>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24"  style="height: 50px;">
					<router-link :to="{ path: '/iamteacher/listByTeacherId'! }">
						<SvgIcon :name="ele-Apple" style="font-size: 18px" />
						<p>我的社团（我是老师）</p>
					</router-link>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="home">
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { getAPI } from '/@/utils/axios-utils';
import { getSystemWellcome } from '/@/api/main/home';

// 定义变量内容
const systemWellcomeRef = ref();
const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);

// 页面加载时
onMounted(() => {
	//initEchartsResize();
	getSystemWellcome().then((res) => {
		systemWellcomeRef.value = res.data?.result;
	});
});

</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
	overflow: hidden;
	.home-card-one,
	.home-card-two,
	.home-card-three {
		.home-card-item {
			width: 100%;
			height: 130px;
			border-radius: 4px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);
			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}
			&-icon {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				flex-shrink: 1;
				i {
					color: var(--el-text-color-placeholder);
				}
			}
			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
			}
		}
	}
	.home-card-one {
		@for $i from 0 through 3 {
			.home-one-animation#{$i} {
				opacity: 0;
				animation-name: error-num;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
				animation-delay: calc($i/4) + s;
			}
		}
	}
	.home-card-two,
	.home-card-three {
		.home-card-item {
			height: 400px;
			width: 100%;
			overflow: hidden;
			.home-monitor {
				height: 100%;
				.flex-warp-item {
					width: 25%;
					height: 111px;
					display: flex;
					.flex-warp-item-box {
						margin: auto;
						text-align: center;
						color: var(--el-text-color-primary);
						display: flex;
						border-radius: 5px;
						background: var(--next-bg-color);
						cursor: pointer;
						transition: all 0.3s ease;
						&:hover {
							background: var(--el-color-primary-light-9);
							transition: all 0.3s ease;
						}
					}
					@for $i from 0 through $homeNavLengh {
						.home-animation#{$i} {
							opacity: 0;
							animation-name: error-num;
							animation-duration: 0.5s;
							animation-fill-mode: forwards;
							animation-delay: calc($i/10) + s;
						}
					}
				}
			}
		}
	}
}
</style>
